@import "../../both/mixin";

$cr_width : (280px) * 4;
$list_margin_top_bottom : 15px;
$border : 1px solid #d0d6d9;
$item_margin : 4px 10px;

.user_course_list_cr.bln{
  box-sizing: border-box;
  width : $cr_width;
  margin : 25px auto 10px;

  @include cf(".user_course_list_direction");
  @include cf(".user_course_list_sort_by");

  .user_course_list_{

    &title{
      margin : 0px 20px;
      padding-bottom: 20px;
      font-size : 18px;
      font-weight: bold;
    }

    &direction{
      margin : 0px 20px;
      border-top : $border;

      .title{
        float: left;
        font-size : 14px;
        color : #787d82;
        padding : 2px 6px;
        margin : $list_margin_top_bottom 20px;
      }

      @include cf("ul.user_course_list_dr_item");

      ul.user_course_list_dr_item{
        display: block;
        list-style: none;
        float: left;

        li{
          display: block;
          float: left;
          padding : 2px 6px;
          margin : $list_margin_top_bottom 20px;
          font-size : 14px;
          cursor: pointer;
        }
        li.cur{
          background-color : red;
          color : white;
        }
      }
    }

    &sort_by{
      margin : 0px 20px;
      background-color : #f9f9f9;
      border-top : $border;
      padding : 10px 0px;

      .sort_by_item{
        float: left;
        font-size : 14px;
        cursor: pointer;
        margin : $item_margin;
        color : #787d82;
      }
      .sort_by_item:first-child{
        margin-left : 20px;
        padding-left : 6px;
      }
      .sort_by_item.cur{
        color : black;
      }

      .fl{
        float: left;

      }

      .fr{
        float: right;
        input[type="checkbox"]{
          display: none;
        }

        .radio_input{
          display:inline-block;
          height:16px;
          margin-right:10px;
          margin-top:-1px;
          vertical-align:middle;
          width:16px;
          line-height:1;
          background-color:#fff;
          border: 1px solid rgba(0,0,0,0.15);
        }

        input[type="checkbox"]:checked + .radio_input:after{
          content: '\2714';
          top: 0px;
          left: 0px;
          color: #758794;
          width: 100%;
          text-align: center;
          font-size: 14px;
          padding: 1px 0 0 0;
          vertical-align: top;
        }

        .filter{
          color : #787d82;
          margin-right : 25px;

          label{
            cursor: pointer;
          }
        }

        .cur_page{
          color : red;
        }

        .cur_page,.total_page{
          margin : 4px 0px;
          padding: 2px 0px;
          cursor: auto;
        }

        .page_before{
          margin-left : 30px;
          margin-right : 0px;
        }

        .page_next{
          margin-right : 20px;
        }

        .sort_by_item.disable{
          cursor: auto;
          color : #c8cdd2
        }

        .page_before,.page_next{
          border: 1px solid grey;
          padding : 2px 6px;
        }

      }
    }

  }

  @include cf("ul.user_course_list");

  ul.user_course_list{
    list-style: none;
    display: block;
    margin-top : 20px;
  }

  ul > li{
    display: block;
    float: left;
  }

  .user_course_list_paging{
    margin: 20px 0;
    text-align: center;

    ul {
      display: inline-block;
      list-style: none;

      li{
        display: inline-block;
        padding : 5px 10px;
        font-size : 16px;
        vertical-align: middle;
        height : 30px;
        line-height : 20px;
        cursor: pointer;
      }

      li.disable{
        cursor: auto;
        color : #c8cdd2;
      }

      li.page{
        width : 30px;
        border-radius: 100%;
      }

      li.page.cur{
        background-color : #4d555d;
        color : white;
      }

    }
  }
}